<template>
    <div class="content">
        <div class="list_hot">
            <div class="Card-header_card">
                <div class="card-title">
                    <span class="title_SE4va" :style="lang == 'en' ? 'font-size:19px;' : ''">{{ $t('Exclusive_Gift') }}</span>
                    <a @click="$router.push(url_hot)" target="_blank">
                        <span class="more">
                            <span>{{ $t('more') }}</span>
                            <el-icon><ArrowRight /></el-icon>
                        </span>
                    </a>
                </div>
                <div class="main">
                    <div class="list-inner">
                        <div class="list_item" v-for="item in freeGiftList" :key="item.id" @click="$router.push('/giftPack/'+item.id)">
                            <div style="display: flex;align-items: center;">
                                <img width="45" height="45" :src="$baseUrl+item.icon" alt="">
                            </div>
                            <div>
                                <div class="game_name">{{ item.title }}</div>
                                <div class="game_desc">{{ item.gift_content }}</div>
                            </div>
                        </div>
                        <p class="isNull isNull_notext" v-if="freeGiftList.length == 0">{{ $t('No_gift_packages') }}</p>
                    </div>
                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive } from "vue";
const url = '/home/announcement'
const url_detail = '/home/announcement/announcementDetails/'
const url_Activity = '/home/ActivityDetails/'
const url_hot = '/giftPack/0'


const freeGiftList = reactive([])
const getFreeGiftList = async () =>{
    const list = await axios.get('/getFreeGiftList?limit=5')
    Object.assign(freeGiftList,list.data.data)
}
getFreeGiftList()

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}
</script>

<style lang="less" scoped>
.content {
    width: 90%;
    // height: 500px;
    // background-color: rgb(34, 192, 165);
    margin-top: 16px;
    .list_hot{
    
        margin-bottom: 20px;
        .card-title{
            position: relative;
        }
        .title_SE4va{
            font-size: 23px;
            font-weight: bold;
            background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变背景 */
            -webkit-background-clip: text; /* 文字渐变 */
            background-clip: text;
            color: transparent; /* 隐藏原文字颜色 */
            letter-spacing: 1px;
            line-height: 32px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
            filter: brightness(1.1);
        }
        .title_SE4va::before{
            content: '🎁'; /* 图标装饰 */
            margin-right: 10px;
            background: transparent !important;
            color: @primary-color;
        }
        .more{
            font-size: 12px;
            color: rgba(0, 0, 0, .6);
            position: absolute;
            right: 0;
            top: 3px;
            border: 1px solid rgba(0, 0, 0, .2);
            height: 22px;
            line-height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .more:hover{
            background-color: rgb(241, 241, 241);
            
        }
        .main{
            margin-top: 15px;
            .main_item{
                display: flex;
                margin-top: 20px;
              
                .list-item-num{
                    flex: 0.5;
                }
                .num{
                    width: 48px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    font-weight: 700;
                    font-size: 20px;
                    color: rgba(0, 0, 0, .35);
                }
                .list_right{
                    padding-bottom: 8px;
                    border-bottom: 1px solid rgba(0, 0, 0, .2);
                    display: flex;
                    flex: 3;
                    .list_right_r{
                        flex: 3;
                        .label span{
                            border: 1px solid rgba(0, 0, 0, .35);
                            margin-right: 5px;
                            padding: 1px 5px;
                            font-size: 12px;
                            border-radius: 10px;
                            cursor: pointer;
                        }
                        .label span:hover{
                            border: 1px solid rgb(11, 145, 241);
                        }
                    }
                    .list_right_r p{
                        font-size: 13px;
                        margin-bottom: 8px;
                    }
                    .name:hover{
                        color: rgb(11, 145, 241);
                        cursor: pointer;
                    }
                    
                }
                
                .list_right img{
                    border-radius: 14px;
                }

                
            }
            .main_item:last-child{
                .list_right{
                    border: none;
                }
                
            }
        }

        .list-inner {
            .list_item {
                display: flex;
                margin-top: 10px;
                position: relative;
                border-bottom: 1px dotted #e1e1e1;
                padding-bottom: 10px;
                cursor: pointer;
                div{
                    margin: 0;
                    img{
                        border-radius: 8px;
                    }
                } 
                .game_name{
                    margin-left: 10px;
                    font-size: 15px;
                    font-weight: bold;
                }
                .game_desc{
                    margin-left: 10px;
                    font-size: 12px;
                    color: #666666;
                }
            }
            .list_item:hover{
                .game_name{
                    color: #1890ff;
                }
            }
        }

        .announcement{
            width: 100%;
            // height: 300px;
            // background-color: #1890ff;
            margin-top: 10px;
            .list_con {
                a{
                    text-decoration: none;
                    color: #000;
                }
                padding: 5px 0;
                li{
                    list-style: none;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #d9d9d9;
                    height: 30px;
                    cursor: pointer;
                    span{
                        float: right;
                        font-size: 13px;
                        line-height: 22px;
                        color: #7d7d7d;
                    }
                }
                li:hover{
                    color: #1890ff;
                    span{
                        color: #1890ff;
                    }
                    
                }
                p{
                    width: 57%;
                    margin-left: 0;
                    float: left;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>